<!DOCTYPE html>
<html>
<head>
    <title>树莓派摄像头监控</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="container">
        <h1>实时监控画面</h1>
        <div class="controls">
            <button class="control-btn" id="forward">Forward (W)</button>
            <button class="control-btn" id="backward">Backward (S)</button>
            <button class="control-btn spin-btn" id="spin_left">Spin Left (A)</button>
            <button class="control-btn spin-btn" id="spin_right">Spin Right (D)</button>
            <button class="control-btn" id="stop">Stop (Space)</button>
        </div>
        <img src="{{ url_for('video_feed') }}" class="video-stream">
    </div>

    <script>
        // 键盘事件监听
        document.addEventListener('keydown', (e) => {
            const key = e.key.toLowerCase();
            if (key === 'w') sendCommand('forward');
            if (key === 's') sendCommand('backward');
            if (key === 'a') sendCommand('spin_left');
            if (key === 'd') sendCommand('spin_right');
            if (e.code === 'Space') sendCommand('stop');
        });

        // 按钮事件监听
        document.querySelectorAll('.control-btn').forEach(btn => {
            btn.addEventListener('mousedown', () => {
                const command = btn.id;
                sendCommand(command);
            });
            
            btn.addEventListener('mouseup', () => {
                sendCommand('stop');
            });
        });

        // 发送控制命令
        function sendCommand(command) {
            fetch('/control', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ command: command })
            })
            .then(response => {
                if (!response.ok) {
                    console.error('控制命令发送失败');
                }
            });
        }
    </script>
</body>
</html>